<template>
    <h3>{{ pForm.title }}</h3>
    <div id="section">
        <bDetail :instance="pForm" class="form" title="预约人信息" cover="80%"></bDetail>
        <bDetail :instance="pForm" label_prop="labels_info" class="form" title="订单信息" cover="80%"></bDetail>
        <div class="blank"></div>
        <div v-if="pForm.data.status === NURSING_APPOINTMENT_STATUS.未支付">
            <ElButton type="primary" :plain="true" v-if="but.has('nursing_appointment:pay')" @click="() => pForm.pay()">
                {{ but.get('nursing_appointment:pay') }}
            </ElButton>
        </div>
        <div v-else-if="pForm.data.status === NURSING_APPOINTMENT_STATUS.已支付">
            <ElButton type="primary" :plain="true" v-if="but.has('nursing_appointment:audit:no')" @click="auditNo">
                {{ but.get('nursing_appointment:audit:no') || '退回' }}</ElButton>
            <ElButton type="primary" v-if="but.has('nursing_appointment:audit')" @click="pForm.show = true">
                {{ but.get('nursing_appointment:audit') || '审核' }}</ElButton>
        </div>
    </div>
    <ElDialog v-model="pForm.show" title="审核" @open="() => pForm.getDepartmentTree()">
        <div style="display: flex;width: 100%;">
            <ElTree style="width: 16em;" :data="pForm.departmentTree" :props="defaultProps"
                @node-click="(node) => pForm.handleDepartmentClick(node)">
            </ElTree>
            <div style="width: 20px;"></div>
            <div v-if="pForm.nurseLeader.length === 0">
                未选择科室或科室内暂无护士
            </div>
            <ElRadioGroup v-else style="flex-grow: 1;display: flex;" v-model="pForm.nurseLeaderId">
                <ElRadio v-for="value in pForm.nurseLeader" :key="value.id" :value="value.id">
                    {{ value.name }}
                </ElRadio>
            </ElRadioGroup>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <ElButton @click="pForm.show = false">取消</ElButton>
                <ElButton type="primary" @click="() => pForm.audit()">确认</ElButton>
            </div>
        </template>
    </ElDialog>
</template>

<script lang="ts" setup>
import bDetail from "@/components/public/b_detail.vue";
import { IForm } from "@b/index/nursing_appointment";
import { useRoute } from "vue-router";
import { pagebuttonStore } from "@b/store";
import { ElButton, ElDialog, ElTree, ElRadio, ElRadioGroup, ElMessageBox } from "element-plus";
import { NURSING_APPOINTMENT_STATUS } from "@b/model/enum";

const pForm = new IForm();
const id = useRoute().query.id;
pForm.id = Number(id);
const but = pagebuttonStore().button;
pForm.setData();
pForm.init();
const defaultProps = {
    children: 'departments',
    label: 'name',
    value: 'id'
}

const auditNo = () => {
    ElMessageBox.prompt('未通过原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then((message) => {
        pForm.auditNo(message)
    })
}
</script>

<style scoped>
:deep(.el-dialog) {
    width: 90%;
    max-width: 780px;
}

.edit {
    position: absolute;
    top: 20px;
    right: 20px;
}
</style>
